<template>
  <div class="top-bg clearfix">
    <anime-text class="anime-text"></anime-text>
    <div class="bottom-icon">
      <angle-down class="icon" />
    </div>
  </div>
</template>

<script setup name="topBg">
import AnimeText from "@/components/AnimeText/index.vue"
import { AngleDown } from "@vicons/fa";
import { onMounted } from "vue"

onMounted(()=> {
})
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}

.top-bg {
  position: relative;
  background: #0000004D;
  width: 100%;
  height: 100vh !important;
}
.anime-text {
  position: absolute;
  top: calc(50% - 125px);
  width: 100%;
}
.bottom-icon {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -15px;
  animation: down 3s ease-in-out infinite;
  .icon {
    width: 30px;
    height: 30px;
    color: #eee;
  }
}
@keyframes down {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
  }
}
</style>
